<template>
  <div>
    <transition name="history-slide">
      <div v-if="isVisible" class="history-panel" :class="{ mobile: isMobile }">
        <!-- 移动端遮罩 -->
        <div v-if="isMobile" class="history-backdrop" @click="close"></div>

        <!-- 面板内容 -->
        <div class="history-content">
          <!-- 头部 -->
          <div class="history-header">
            <h3>游戏历史记录</h3>
            <div class="header-info">
              <span class="record-count">{{ history.events.length }}/200</span>
            </div>
            <div class="header-actions">
              <button
                v-if="isStoryteller"
                @click="restartGame"
                class="btn-restart"
                title="重新开始游戏"
              >
                🔄
              </button>
              <button
                v-if="isStoryteller"
                @click="exportHistory"
                class="btn-export"
                title="导出历史记录"
              >
                📄
              </button>
              <button
                v-if="isStoryteller"
                @click="openGameReview"
                class="btn-review"
                title="生成复盘图"
              >
                📊
              </button>
              <button @click="close" class="btn-close">×</button>
            </div>
          </div>

          <!-- 筛选器 -->
          <div class="history-filters">
            <select v-model="filterDay" class="filter-select">
              <option value="">所有阶段</option>
              <option v-for="day in availableDays" :key="day.value" :value="day.value">
                {{ day.label }}
              </option>
            </select>
            <select v-model="filterPlayer" class="filter-select">
              <option value="">所有玩家</option>
              <option v-for="player in availablePlayers" :key="player.id" :value="player.name">
                {{ player.name }}
              </option>
            </select>
          </div>

          <!-- 新增记录按钮和表单 -->
          <div class="add-record-section" v-if="isStoryteller">
            <button 
              @click="showAddForm = !showAddForm" 
              class="btn-add-record"
              :class="{ active: showAddForm }"
            >
              {{ showAddForm ? '取消新增' : '📝 新增记录' }}
            </button>
            
            <div v-if="showAddForm" class="add-record-form">
              <div class="form-row">
                <div class="form-group">
                  <label>内容:</label>
                  <input 
                    v-model="newRecord.summary" 
                    type="text" 
                    placeholder="输入记录内容..."
                    class="form-input"
                  />
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-group">
                  <label>阶段:</label>
                  <select v-model="newRecord.round" class="form-select">
                    <option value="">选择阶段</option>
                    <option v-for="day in availableDays" :key="day.value" :value="day.value">
                      {{ day.label }}
                    </option>
                  </select>
                </div>
                
                <div class="form-group">
                  <label>玩家:</label>
                  <select v-model="newRecord.playerName" class="form-select">
                    <option value="">选择玩家（可选）</option>
                    <option v-for="player in availablePlayers" :key="player.id" :value="player.name">
                      {{ player.name }}
                    </option>
                  </select>
                </div>
              </div>
              
              <div class="form-row">
                <div class="form-group">
                  <label>详细描述:</label>
                  <textarea 
                    v-model="newRecord.details" 
                    placeholder="详细描述（可选）..."
                    class="form-textarea"
                    rows="2"
                  ></textarea>
                </div>
              </div>
              
              <div class="form-actions">
                <button @click="addCustomRecord" class="btn-submit" :disabled="!newRecord.summary">
                  ✅ 添加记录
                </button>
                <button @click="resetForm" class="btn-reset">
                  🔄 重置
                </button>
              </div>
            </div>
          </div>

          <!-- 事件列表 -->
          <div class="history-list">
            <div
              v-for="event in filteredEvents"
              :key="event.id"
              class="history-card"
              :class="{
                'public-event': event.isPublic,
                expanded: expandedEvents.includes(event.id),
              }"
            >
              <!-- 卡片头部 -->
              <div class="card-header">
                <div class="event-icon">
                  {{ getEventIcon(event.action) }}
                </div>
                <div class="event-info" @click="toggleEventDetails(event.id)">
                  <div class="event-summary">{{ event.summary }}</div>
                  <div class="event-meta">
                    <span class="event-time">{{
                      formatTime(event.timestamp)
                    }}</span>
                    <span v-if="event.isPublic" class="public-badge">公开</span>
                  </div>
                </div>
                <div class="card-actions" @click.stop>
                  <button 
                    v-if="isStoryteller" 
                    @click="deleteEvent(event.id)"
                    class="btn-delete-event"
                    title="删除此条记录"
                  >
                    🗑️
                  </button>
                  <div class="expand-indicator" @click="toggleEventDetails(event.id)">▼</div>
                </div>
              </div>

              <!-- 可展开的详细信息 -->
              <div
                v-if="expandedEvents.includes(event.id)"
                class="card-details"
              >
                <div class="detail-item" v-if="event.details">
                  <span class="label">详情:</span>
                  <span class="value">{{ event.details }}</span>
                </div>
                <div class="detail-item" v-if="event.note">
                  <span class="label">备注:</span>
                  <span class="value">{{ event.note }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 空状态 -->
          <div v-if="filteredEvents.length === 0" class="empty-state">
            <p>暂无历史记录</p>
          </div>
        </div>
      </div>
    </transition>

    <!-- 清除历史记录确认对话框 -->
    <div v-if="showClearConfirm" class="clear-confirm-overlay">
      <div class="clear-confirm-modal">
        <h3>清除历史记录</h3>
        <p>检测到历史记录，是否清除上一局的记录？</p>
        <div class="confirm-buttons">
          <button @click="confirmClear" class="btn-confirm">确认清除</button>
          <button @click="cancelClear" class="btn-cancel">保留记录</button>
        </div>
      </div>
    </div>

    <!-- 重新开始游戏确认对话框 -->
    <div v-if="showRestartConfirm" class="restart-confirm-overlay">
      <div class="restart-confirm-modal">
        <h3>重新开始游戏</h3>
        <p>确认重新开始游戏吗？这将：</p>
        <ul>
          <li>清除所有历史记录</li>
          <li>重置游戏状态</li>
          <li>切换到夜晚阶段</li>
          <li>设置为首夜</li>
        </ul>
        <div class="confirm-buttons">
          <button @click="confirmRestart" class="btn-confirm">
            确认重新开始
          </button>
          <button @click="cancelRestart" class="btn-cancel">取消</button>
        </div>
      </div>
    </div>
    
    <!-- 游戏复盘模态框 -->
    <GameReviewModal
      :isVisible="showGameReview"
      @close="closeGameReview"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import GameReviewModal from "./modals/GameReviewModal";

export default {
  name: "HistoryPanel",
  components: {
    GameReviewModal,
  },
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      expandedEvents: [],
      isMobile: window.innerWidth <= 768,
      showClearConfirm: false,
      showRestartConfirm: false,
      showGameReview: false,
      filterDay: "",
      filterPlayer: "",
      showAddForm: false,
      newRecord: {
        summary: "",
        details: "",
        round: "",
        playerName: "",
      },
    };
  },
  computed: {
    ...mapState(["history", "session", "grimoire"]),
    ...mapState("players", ["players"]),
    isStoryteller() {
      return !this.session.isSpectator;
    },
    // 动态生成可用天数列表（区分夜晚和白天）
    availableDays() {
      const roundsSet = new Set();
      
      // 收集所有出现过的轮次
      this.history.events.forEach(event => {
        if (event.round && event.round !== "setup") {
          roundsSet.add(event.round);
        }
      });
      
      // 英文轮次转数字映射
      const getNumberFromEnglish = (englishStr) => {
        const numberMap = {
          "first": 1, "second": 2, "third": 3, "fourth": 4,
          "fifth": 5, "sixth": 6, "seventh": 7, "eighth": 8,
          "ninth": 9, "tenth": 10, "eleventh": 11, "twelfth": 12,
          "thirteenth": 13, "fourteenth": 14, "fifteenth": 15,
        };
        
        // 支持 round_X 格式
        const roundMatch = englishStr.match(/round_(\d+)/);
        if (roundMatch) {
          return parseInt(roundMatch[1]);
        }
        
        return numberMap[englishStr] || null;
      };
      
      // 定义轮次的顺序权重，用于排序
      const getRoundWeight = (round) => {
        if (round === "first_night") return 1;
        if (round === "first_day") return 2;
        if (round === "second_night") return 3;
        if (round === "second_day") return 4;
        
        // 处理英文单词_night格式
        const nightMatch = round.match(/(.+)_night/);
        if (nightMatch) {
          const identifier = nightMatch[1];
          const number = getNumberFromEnglish(identifier);
          return number ? number * 2 - 1 : 999;
        }
        
        // 处理英文单词_day格式
        const dayMatch = round.match(/(.+)_day/);
        if (dayMatch) {
          const identifier = dayMatch[1];
          const number = getNumberFromEnglish(identifier);
          return number ? number * 2 : 999;
        }
        
        return 999; // 未知格式放在最后
      };
      
      // 生成标签
      const getRoundLabel = (round) => {
        if (round === "first_night") return "首夜";
        if (round === "first_day") return "第1个白天";
        if (round === "second_night") return "第2个夜晚";
        if (round === "second_day") return "第2个白天";
        
        // 处理英文单词_night格式
        const nightMatch = round.match(/(.+)_night/);
        if (nightMatch) {
          const identifier = nightMatch[1];
          const number = getNumberFromEnglish(identifier);
          return number ? `第${number}个夜晚` : round;
        }
        
        // 处理英文单词_day格式
        const dayMatch = round.match(/(.+)_day/);
        if (dayMatch) {
          const identifier = dayMatch[1];
          const number = getNumberFromEnglish(identifier);
          return number ? `第${number}个白天` : round;
        }
        
        return round; // 后备显示
      };
      
      // 转换为数组并按权重排序
      const sortedRounds = Array.from(roundsSet).sort((a, b) => {
        return getRoundWeight(a) - getRoundWeight(b);
      });
      
      return sortedRounds.map(round => ({
        value: round,
        label: getRoundLabel(round)
      }));
    },
    // 动态生成可用玩家列表（从历史事件中提取）
    availablePlayers() {
      const playersSet = new Set();
      
      // 从当前玩家列表中添加
      this.players.forEach(player => {
        if (player.name && player.name.trim()) {
          playersSet.add(player.name);
        }
      });
      
      // 从历史事件中提取玩家名称
      this.history.events.forEach(event => {
        if (event.playerName && event.playerName.trim()) {
          playersSet.add(event.playerName);
        }
      });
      
      // 转换为排序的数组
      const sortedPlayers = Array.from(playersSet).sort();
      
      return sortedPlayers.map(name => ({
        id: name,
        name: name
      }));
    },
    filteredEvents() {
      let events = this.history.events;

      // 玩家只能看到公开事件
      if (!this.isStoryteller) {
        events = events.filter((event) => event.isPublic);
      }

      // 按阶段筛选（精确匹配轮次）
      if (this.filterDay) {
        events = events.filter((event) => {
          return event.round === this.filterDay;
        });
      }

      // 按玩家筛选
      if (this.filterPlayer) {
        events = events.filter((event) => {
          return event.playerName === this.filterPlayer;
        });
      }

      // 按时间倒序排列
      return events.sort((a, b) => b.timestamp - a.timestamp);
    },
  },
  methods: {
    close() {
      this.$emit("close");
    },
    openGameReview() {
      this.showGameReview = true;
    },
    closeGameReview() {
      this.showGameReview = false;
    },
    deleteEvent(eventId) {
      if (confirm("确定要删除这条历史记录吗？")) {
        this.$store.commit("removeHistoryEvent", eventId);
        console.log(`🗑️ 删除历史记录: ${eventId}`);
      }
    },
    addCustomRecord() {
      if (!this.newRecord.summary.trim()) {
        alert("请输入记录内容");
        return;
      }
      
      const customEvent = {
        action: "custom_record",
        summary: this.newRecord.summary.trim(),
        details: this.newRecord.details.trim() || "",
        round: this.newRecord.round || this.history.currentRound,
        playerName: this.newRecord.playerName || "",
        isPublic: false, // 自定义记录默认不公开
      };
      
      this.$store.commit("addHistoryEvent", customEvent);
      console.log("📝 添加自定义记录:", customEvent);
      
      // 重置表单并关闭
      this.resetForm();
      this.showAddForm = false;
    },
    resetForm() {
      this.newRecord = {
        summary: "",
        details: "",
        round: "",
        playerName: "",
      };
    },
    toggleEventDetails(eventId) {
      const index = this.expandedEvents.indexOf(eventId);
      if (index > -1) {
        this.expandedEvents.splice(index, 1);
      } else {
        this.expandedEvents.push(eventId);
      }
    },
    getEventIcon(action) {
      const icons = {
        wake_up: "🌙",
        vote: "🗳️",
        execution: "💀",
        role_assignment: "🎭",
        nomination: "📢",
        player_died: "💀",
        player_revived: "🔄",
        player_voteless: "🚫",
        player_vote_restored: "✅",
        player_nominated: "⚖️",
        player_nomination_cancelled: "❌",
        player_protected: "🛡️",
        player_poisoned: "☠️",
        custom: "✏️",
        reminder_added: "🏷️",
        reminder_removed: "🗑️",
        custom_reminder_added: "✏️",
        role_ability: "⚡",
        phase_change: "⚙️",
        game_start: "🎮",
        custom_record: "📝",
      };
      return icons[action] || "📝";
    },
    formatTime(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleTimeString("zh-CN", {
        hour: "2-digit",
        minute: "2-digit",
      });
    },
    confirmClear() {
      this.$store.commit("clearHistory");
      this.showClearConfirm = false;
    },
    cancelClear() {
      this.showClearConfirm = false;
    },
    restartGame() {
      this.showRestartConfirm = true;
    },
    confirmRestart() {
      // 清除历史记录
      this.$store.commit("clearHistory");

      // 重置游戏状态
      this.$store.commit("resetGameState");

      // 确保切换到夜晚阶段（不管当前是什么阶段）
      if (!this.grimoire.isNight) {
        this.$store.commit("toggleNight");
      }

      // 设置为首夜
      this.$store.commit("setCurrentRound", 1);
      this.$store.commit("setCurrentPhase", "night");

      // 记录首夜开始
      this.$store.commit("addHistoryEvent", {
        action: "game_start",
        summary: "游戏开始",
        details: "说书人开始新游戏，进入首夜阶段",
        phase: "night",
        round: "first_night",
        isPublic: false,
      });

      this.showRestartConfirm = false;
    },
    cancelRestart() {
      this.showRestartConfirm = false;
    },
    exportHistory() {
      const data = JSON.stringify(this.history.events, null, 2);
      const blob = new Blob([data], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "game_history.json";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    },
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener("resize", () => {
      this.isMobile = window.innerWidth <= 768;
    });
  },
};
</script>

<style scoped lang="scss">
.history-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  border-left: 2px solid #4a90e2;
  z-index: 1000;
  display: flex;
  flex-direction: column;

  &.mobile {
    width: 100vw;
    border-left: none;
  }
}

.history-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.history-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.history-header {
  padding: 20px;
  border-bottom: 1px solid #333;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
  }

  .header-info {
    .record-count {
      color: #ccc;
      font-size: 12px;
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }
  }

  .header-actions {
    display: flex;
    gap: 10px;

    button {
      background: none;
      border: none;
      color: #ccc;
      cursor: pointer;
      padding: 5px;
      border-radius: 3px;
      transition: all 0.3s ease;
      font-size: 16px;

      &:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }

      &.btn-restart {
        color: #ffc107;

        &:hover {
          color: #ffca2c;
          background: rgba(255, 193, 7, 0.1);
        }
      }

      &.btn-export {
        color: #4a90e2;

        &:hover {
          color: #357abd;
          background: rgba(74, 144, 226, 0.1);
        }
      }

      &.btn-review {
        color: #28a745;

        &:hover {
          color: #218838;
          background: rgba(40, 167, 69, 0.1);
        }
      }

      &.btn-close {
        color: #dc3545;

        &:hover {
          color: #e74c3c;
          background: rgba(220, 53, 69, 0.1);
        }
      }
    }
  }
}

.history-filters {
  padding: 15px 20px;
  display: flex;
  gap: 10px;

  .filter-select {
    flex: 1;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #333;
    color: #fff;
    border-radius: 4px;

    option {
      background: #000;
      color: #fff;
    }
  }
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}

.history-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #333;
  border-radius: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #4a90e2;
  }

  &.public-event {
    border-color: #28a745;

    .public-badge {
      background: #28a745;
      color: #fff;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  }

  &.expanded {
    .expand-indicator {
      transform: rotate(180deg);
    }
  }
}

.card-header {
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;

  .event-icon {
    width: 40px;
    height: 40px;
    background: rgba(74, 144, 226, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a90e2;
    font-size: 18px;
  }

  .event-info {
    flex: 1;
    cursor: pointer;

    .event-summary {
      color: #fff;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .event-meta {
      display: flex;
      align-items: center;
      gap: 10px;

      .event-time {
        color: #ccc;
        font-size: 12px;
      }
    }
  }

  .card-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    .btn-delete-event {
      background: none;
      border: none;
      color: #dc3545;
      cursor: pointer;
      padding: 4px;
      border-radius: 3px;
      font-size: 14px;
      opacity: 0.7;
      transition: all 0.3s ease;

      &:hover {
        opacity: 1;
        background: rgba(220, 53, 69, 0.1);
        transform: scale(1.1);
      }
    }

    .expand-indicator {
      color: #ccc;
      cursor: pointer;
      padding: 4px;
      border-radius: 3px;
      transition: all 0.3s ease;

      &:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
}

.card-details {
  padding: 0 15px 15px;
  border-top: 1px solid #333;
  margin-top: 10px;

  .detail-item {
    margin-bottom: 10px;

    .label {
      color: #ccc;
      font-size: 12px;
      margin-right: 10px;
    }

    .value {
      color: #fff;
    }
  }

  .event-actions {
    margin-top: 15px;

    .btn-edit-note {
      background: #4a90e2;
      border: none;
      color: #fff;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;

      &:hover {
        background: #357abd;
      }
    }
  }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #ccc;
}

// 动画
.history-slide-enter-active,
.history-slide-leave-active {
  transition: transform 0.3s ease;
}

.history-slide-enter,
.history-slide-leave-to {
  transform: translateX(100%);
}

// 移动端适配
@media (max-width: 768px) {
  .history-panel {
    .history-header {
      padding: 15px;

      h3 {
        font-size: 16px;
      }
    }

    .history-filters {
      padding: 10px 15px;
      flex-direction: column;
    }

    .history-list {
      padding: 0 15px 15px;
    }

    .card-header {
      padding: 12px;

      .event-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
      }
    }
  }
}

// 清除确认对话框样式
.clear-confirm-overlay,
.restart-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.clear-confirm-modal,
.restart-confirm-modal {
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #4a90e2;
  border-radius: 10px;
  padding: 30px;
  text-align: center;
  max-width: 400px;
  width: 90%;

  h3 {
    color: #fff;
    margin: 0 0 20px 0;
    font-size: 18px;
  }

  p {
    color: #ccc;
    margin: 0 0 20px 0;
    line-height: 1.5;
  }

  ul {
    color: #ccc;
    text-align: left;
    margin: 0 0 30px 0;
    padding-left: 20px;

    li {
      margin-bottom: 8px;
      line-height: 1.4;
    }
  }

  .confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;

    button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;

      &.btn-confirm {
        background: #dc3545;
        color: #fff;

        &:hover {
          background: #c82333;
        }
      }

      &.btn-cancel {
        background: #6c757d;
        color: #fff;

        &:hover {
          background: #5a6268;
        }
      }
    }
  }
}

.restart-confirm-modal {
  border-color: #ffc107;

  .btn-confirm {
    background: #ffc107 !important;
    color: #000 !important;

    &:hover {
      background: #ffca2c !important;
    }
  }
}

// 新增记录表单样式
.add-record-section {
  padding: 15px 20px;
  border-bottom: 1px solid #333;
  background: rgba(0, 0, 0, 0.2);

  .btn-add-record {
    width: 100%;
    padding: 12px;
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid #28a745;
    color: #28a745;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(40, 167, 69, 0.3);
      color: #34ce57;
    }

    &.active {
      background: rgba(220, 53, 69, 0.2);
      border-color: #dc3545;
      color: #dc3545;

      &:hover {
        background: rgba(220, 53, 69, 0.3);
        color: #e74c3c;
      }
    }
  }

  .add-record-form {
    margin-top: 15px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid #333;

    .form-row {
      display: flex;
      gap: 15px;
      margin-bottom: 15px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .form-group {
      flex: 1;

      label {
        display: block;
        color: #ccc;
        font-size: 12px;
        margin-bottom: 5px;
        font-weight: bold;
      }

      .form-input,
      .form-select,
      .form-textarea {
        width: 100%;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid #555;
        border-radius: 4px;
        color: #fff;
        font-size: 14px;
        transition: all 0.3s ease;

        &:focus {
          outline: none;
          border-color: #4a90e2;
          background: rgba(74, 144, 226, 0.1);
        }

        &::placeholder {
          color: #888;
        }
      }

      .form-select {
        option {
          background: #000;
          color: #fff;
        }
      }

      .form-textarea {
        resize: vertical;
        min-height: 60px;
      }
    }

    .form-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #333;

      button {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        font-weight: bold;
        transition: all 0.3s ease;

        &.btn-submit {
          background: #28a745;
          color: #fff;

          &:hover:not(:disabled) {
            background: #218838;
          }

          &:disabled {
            background: #6c757d;
            cursor: not-allowed;
            opacity: 0.6;
          }
        }

        &.btn-reset {
          background: #6c757d;
          color: #fff;

          &:hover {
            background: #5a6268;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .add-record-form {
    .form-row {
      flex-direction: column;
      gap: 10px;
    }

    .form-actions {
      flex-direction: column;
      
      button {
        width: 100%;
      }
    }
  }
}
</style>
